import { useEffect, useState, useMemo } from 'react';
import OperaBtnRender from '@/components/OperaBtnRender';
import TableRender from '@/components/TableRender';
import EditAddressModal from '@/components/AddressManageModal';
import { Alert, message, Modal } from 'antd';
import { getColumns } from './config/columns.jsx';
import { queryData, deleteAddressOp, setDefaultAdress } from './service';

const SendAddress = () => {
  const [visible, setVisible] = useState(false);
  const [title, setTitle] = useState(undefined);
  const [item, setItem] = useState({});
  const [area, setArea] = useState(undefined);
  const [type, setType] = useState(undefined);
  const [data, setData] = useState([]);

  useEffect(() => {
    getTableList();
  }, [])

  //获取数据列表
  const getTableList = async () => {
    START_LOADING();
    const { data, success } = await queryData({
      type: 2,
      current: 1,
      size: 50,
    })
    END_LOADING();
    if (success) {
      setData(data.records);
    }
  }

  // 设置地址的默认状态
  const handleSetDefault = async (isDefault, id) => {
    START_LOADING();
    const { success } = await setDefaultAdress({
      isDefault: isDefault == 1 ? 2 : 1,
      id,
      type: 2,
    })
    END_LOADING();
    if (success) {
      message.success('设置成功');
      getTableList();
    }
  };

  // 编辑地址
  const handleEditAddress = (val) => {
    setArea([val.provinceId, val.cityId, val.areaId])
    setItem(val);
    setType(false)
    setVisible(true);
    setTitle('编辑寄件地址');
  };

  // 删除地址
  const handleDelete = async (record) => {
    START_LOADING();
    const res = await deleteAddressOp({
      id: record.id,
    })
    END_LOADING();
    if (res.success) {
      message.success('删除成功！');
      getTableList();
    }
  }

  //点击编辑和删除
  const handleOpera = (type, record) => {
    if (type == 'edit') {
      handleEditAddress(record);
    } else if (type == 'status') {
      handleSetDefault(record.isDefault, record.id);
    } else {
      handleDelete(record);
    }
  }

  // 点击新增地址
  const handleAdd = () => {
    if (data.length >= 20) {
      Modal.info({ content: '寄件地址最多保存二十条' });
      return;
    }
    setType(true)
    setVisible(true);
    setTitle('新增寄件地址');
  };

  //表格列
  const columns = useMemo(() => {
    return getColumns({ handleOpera })
  }, [])

  //表格组件
  const TableRenderProps = {
    data,
    columns,
    style: {
      height: `calc(100vh - 216px)`
    },
    pageConfig: {
      showPage: false
    }
  }

  const EditAddressModalProps = {
    item: !type && { ...item, area },
    title,
    addresstype: 2,
    type,
    handleOk() {
      setVisible(false);
      getTableList();
    },
    handleCancel() {
      setVisible(false);
    },
  }

  //操作按钮
  const btnArr = [
    { elType: 'button', text: '新增地址', onClick: handleAdd }
  ]

  return (
    <div className='global-page-wrap'>
      <Alert description={`寄件地址最多保存20条，还可以保存${20 - data.length}条`} />
      <OperaBtnRender style={{ padding: '12px 0' }} btnArr={btnArr} />
      <TableRender {...TableRenderProps} />
      {visible && <EditAddressModal {...EditAddressModalProps} />}
    </div>
  );
};

export default SendAddress;
